<template>
    <fieldset>
        <legend>登入页</legend>
        用户名：
        <input type="text" v-model="username">
        <br>
        密码：
        <input type="password" v-model="password" @keydown.enter="login">
        <button @click="login">登入</button>
    </fieldset>
</template>
<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import {useRouter} from "vue-router"
//1.获取输入框中的用户名和密码
let username=ref("")
let password=ref("")
//2.发起请求，请求登入
let router=useRouter()
let login=async ()=>{
   let res=await api.loginApi(username.value,password.value)
   //服务器会返回token,这个token是个令牌，这个令牌需要保存在本地，后续请求的时候带上令牌，就能随意访问服务器的数据了
   //1.localStorage,关掉页面，只要token还具备时效性，那么就能访问其他页面，不需要重新登入
   //2.sessStorage,用户关掉页面，token就能被清除，不管它还生不生效，重新打开页面，用户重新登录
   if(res.data.state){
    //将token存到本地
    sessionStorage.setItem('qf-token',res.data.token)
    //页面要进行跳转
    router.push("/")
   }else{
    alert(res.data.msg)
   }
   console.log(res)
}
</script>